<template>
  <div class="maincontent">
    <div class="contentbox">
      <div class="printImg" v-loading="loadedRatio">
        <template v-if="pdfList.length > 0">
          <p class="arrow">
            <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">上一页</span>
            <span class="pages">{{currentPage}} / {{pageCount}}</span>
            <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">下一页</span>
          </p>
          <pdf
            class="pdfBox setScroll"
            :src="pdfList[pdfNum].url"
            :page="currentPage"
            @loaded="loadPdfHandler"
            @progress="monitorPdfProgress"
            @error="monitorPdfError"        
            @num-pages="pageCount = $event"
            @page-loaded="currentPage = $event"
            style="border:1px solid rgba(0,0,0,.05)"
          ></pdf>
        </template>        
      </div>

      <div class="addadvice">
        <div class="header">
          <div class="title">审查意见录入</div>
          <div class="export" style="cursor: pointer;">
            <div class="dachuShenCha_item" @click="getExport">
              <i class="el-icon-upload2"></i> 导出审查意见
            </div>
            <div v-if="!isCurrentProcess" class="dachuShenCha_item" @click="handleCheckOpinion">
              <i class="el-icon-document-checked"></i> 校验审查意见
            </div>
          </div>
        </div>

        <div class="opinionType">
          <span :class="{active: opinionTypeIndex == 0}" @click="handleSelectOpinionType(0)">市中心意见</span>
          <span :class="{active: opinionTypeIndex == 1}" @click="handleSelectOpinionType(1)">区县意见</span>
        </div>
        <!-- 市中心意见 -->
        <div v-if="(!showadd) && (opinionTypeIndex == 0)">
          <div class="menulist">
            <div
              class="item"
              v-for="(item, index) in pdfList"
              :key="index"
              :class="{'active': pdfNum === index}"
              @click="changePdfNum(index)"
            >{{item.fileName}}</div>
            <el-switch style="margin-top: 10px;" v-model="moreChange" inactive-text="批量修改" v-if="!isCurrentProcess"></el-switch>
            <div style="margin: 20px 30px;" v-show="moreChange">
              <el-radio-group style="margin-right: 20px;" v-model="changeType.status">
                <el-radio :label="3">已修改</el-radio>
                <el-radio :label="2">未修改</el-radio>
              </el-radio-group>
              <el-button type="primary" size="small" @click="changeAdvice">确定</el-button>
              <el-button size="small" @click="moreChange = false">取消</el-button>
            </div>
            <el-button style="float:right;margin-right:10px;" @click="addadvice" type="primary" size="mini" v-if="!isCurrentProcess">新增</el-button>
            <el-button style="float:right;margin-right:20px;" @click="handelCheckSuccess" type="primary" size="mini" v-if="adviceList.length == 0">审核通过</el-button>
            <div style="clear:both;"></div>
          </div>
          <div class="advicelist">
            <div class="item" v-for="(item, index) in adviceList" :key="index">
              <div class="situation">
                <div class="msg" style="margin-top:0;">附件名称：{{item.attachmentName}}</div>
                <div class="msg">问题描述：{{item.content}}</div>
                <div class="msg">修改情况：{{item.status | statusType}}</div>
                <div class="msg">审查时间：{{item.updateTime || item.createTime}}</div>
              </div>
              <div class="other">
                <div style="display: flex; align-items: center;" v-if="!isCurrentProcess">
                  <el-button type="text" @click="changeOne(item.id)" v-if="item.status != 4">修改情况</el-button>
                  <div class="delete" @click="deleteOne(item.id)">删除</div>
                </div>
              </div>
            </div>
            <div v-if="adviceList.length == 0" style="padding-top:50px;text-align:center">
              暂无数据！
            </div>
          </div>
        </div>
        <!-- 区县意见 -->
        <div v-if="opinionTypeIndex == 1">
          <div class="advicelist">
            <div class="item" v-for="(item, index) in districtAdviceList" :key="index">
              <div class="situation">
                <div class="msg" style="margin-top:0;">附件名称：{{item.attachmentName}}</div>
                <div class="msg">问题描述：{{item.content}}</div>
                <div class="msg">审查时间：{{item.updateTime || item.createTime}}</div>
              </div>
            </div>
            <div v-if="districtAdviceList.length == 0" style="padding-top:50px;text-align:center">
              暂无数据！
            </div>
          </div>
        </div>
        <!-- 添加审查意见 -->
        <el-form v-if="showadd" :model="form" label-width="80px" style="margin-top:30px;">
          <el-form-item label="附件名称">
            <el-select placeholder="请选择" @change="setFileType" v-model="form.attachmentFileId">
              <el-option
                v-for="(item, index) in pdfList"
                :key="index"
                :label="item.fileName"
                :value="item.fileId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="问题描述">
            <el-input type="textarea" v-model="form.content" rows="4"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="showadd=false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 修改情况弹窗 -->
    <el-dialog :close-on-click-modal="false" title="修改情况" :visible.sync="dialogVisible" width="30%">
      <div class="content">
        <el-radio-group style="margin-right: 20px;" v-model="changeTypeOne.status">
          <el-radio :label="3">已修改</el-radio>
          <el-radio :label="2">未修改</el-radio>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changeAdviceOne">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pdf from "vue-pdf";
import config from "@/config/index.js";
import {
  getPDF,
  getAdviceList,
  getExport,
  changeAdviceOne,
  deleteAdviceOne,
  addAdvice,
  changeAdvice
} from "@/api/feasibilityStudy/countyReview.js";
import { submitAdvice } from "@/api/feasibilityStudy/common.js"
import { submitProcessComeback } from "@/api/common.js"
export default {
  components: { pdf },
  data() {
    return {
      projectId:localStorage.getItem('projectId') * 1,
      form: {
        content: "",
        projectId: localStorage.getItem('projectId') * 1,
        linkId: "FEASIBILITY_STUDY_CITY_CENTER_EXAMINE",
        attachmentFileId: "",
        attachmentType: "",
        status: 1
      },
      showadd: false,
      moreChange: false,
      currentPage: 1,
      pageCount: 1,
      pdfNum: 0,
      loadedRatio:false,
      pdfList: [],
      dialogVisible: false,
      changeTypeOne: {
        status: 3,
        id: ""
      },
      changeType: {
        status: 3,
        idStr: ""
      },
      adviceList: [],
      districtAdviceList:[],
      opinionTypeIndex:0
    };
  },
  computed:{
    isCurrentProcess:function () {
      let isTrue = localStorage.getItem('key') == 'FEASIBILITY_STUDY_CITY_CENTER_EXAMINE';
      return !isTrue
    }
  },
  watch:{
    pdfNum:function () {
      this.loadedRatio = true;
    }
  },
  created() {
    this.getPDF();
  },
  methods: {
    onSubmit() {
      //提交新增审查意见
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      addAdvice(this.form)
        .then(res => {
          loading.close();
          this.$message({
            message: "提交成功！",
            type: "success"
          });
          this.showadd = false;
          this.getAdviceList();
        })
        .catch(res => {
          loading.close();
        });
    },
    addadvice() {
      //打开新增审查意见表单
      this.form = {
        content: "",
        projectId: this.projectId,
        linkId: "FEASIBILITY_STUDY_CITY_CENTER_EXAMINE",
        attachmentFileId: "",
        attachmentType: "",
        status: 1
      };
      this.showadd = true;
    },
    //一键审核通过
    handelCheckSuccess:function () {
      //提交新增审查意见
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let params = {
        projectId: this.projectId,
        linkId: "FEASIBILITY_STUDY_CITY_CENTER_EXAMINE",
        attachmentFileId:this.pdfList[this.pdfNum].fileId,
        attachmentType: this.pdfList[this.pdfNum].fileType,
        status: 4,
        content:"无问题"
      }
      addAdvice(params)
        .then(res => {
          loading.close();
          this.$message({
            message: "提交成功！",
            type: "success"
          });
          this.showadd = false;
          this.getAdviceList();
        })
        .catch(res => {
          loading.close();
        });
    },
    setFileType(e) {
      //设置选中附件类型
      let index = this.pdfList.findIndex(a => a.fileId === e);
      this.form.attachmentType = this.pdfList[index].fileType;
    },
    changeAdvice() {
      //批量修改情况
      if (this.adviceList.length > 0) {
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        let list = [];
        this.adviceList.forEach(a => {
          list.push(a.id);
        });
        this.changeType.idStr = list.join(",");
        changeAdvice(this.changeType)
          .then(res => {
            loading.close();
            this.$message({
              message: "提交成功！",
              type: "success"
            });
            this.getAdviceList();
          })
          .catch(res => {
            loading.close();
          });
      }
    },
    getPDF() {
      //获取pdf
      getPDF({ projectId: this.projectId })
        .then(res => {
          this.pdfList = res.data;
          this.pdfList.map(a => {
            a.url = `${config.baseUrl}/pc/file/download?id=${a.fileId}`;
            return a;
          });
          this.getAdviceList();
        })
        .catch(res => {
        });
    },
    changePdfPage(val) {
      // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
    loadPdfHandler(e) {
      // pdf加载时
      this.currentPage = 1; // 加载的时候先加载第一页
    },
    //监听加载完成回调
    monitorPdfProgress:function (val) {
      if(val){
        this.loadedRatio = false;
      }
    },
    //监听pdf加载错误回调
    monitorPdfError:function () {
      this.loadedRatio = false;
      this.$message({
        type:'error',
        message:"pdf加载失败！",
        offset:80
      });
    },
    changePdfNum(num) {
      //切换pdf
      this.pdfNum = num;
      this.currentPage = 1;
      this.pageCount = 1;
      this.getAdviceList();
    },
    getExport() {
      //导出审查意见
      getExport({
        linkId: "FEASIBILITY_STUDY_CITY_CENTER_EXAMINE",
        projectId: this.projectId
      }).then(res => {
        let contentType = localStorage.getItem('contentType');
        if(contentType == 'application/octet-stream;charset=UTF-8'){
          this.fileDownload(res, "审查意见.xlsx");
        }else{
          this.$message.warning('暂无数据可导出!!!'); 
        }
      })
    },
    fileDownload(data, fileName) {
      // 创建隐藏的可下载链接
      var eleLink = document.createElement("a");
      eleLink.download = fileName; // 必须携带格式的名称  比如  app.text 或者 index.html
      eleLink.style.display = "none";
      // 字符内容转变成blob地址
      var blob = new Blob([data]);
      eleLink.href = URL.createObjectURL(blob);
      // 触发点击
      document.body.appendChild(eleLink);
      eleLink.click();
      // 然后移除
      document.body.removeChild(eleLink);
    },
    // 市中心意见
    getAdviceList() {
      //获取意见列表
      getAdviceList({
        fileType: this.pdfList[this.pdfNum].fileType,
        linkId: "FEASIBILITY_STUDY_CITY_CENTER_EXAMINE",
        projectId: this.projectId
      })
        .then(res => {
          this.adviceList = res.data;
        })
        .catch(res => {
          
        });
    },
    //区县意见
    getAdviceList1() {
      //获取意见列表
      getAdviceList({
        fileType: "",
        linkId: "FEASIBILITY_STUDY_DIST_EXAMINE",
        projectId: this.projectId
      })
        .then(res => {
          this.districtAdviceList = res.data;
        })
        .catch(res => {

        });
    },
    changeOne(id) {
      //单个修改情况
      this.changeTypeOne.id = id;
      this.dialogVisible = true;
    },
    changeAdviceOne() {
      //修改情况（单个）
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      changeAdviceOne(this.changeTypeOne)
        .then(res => {
          loading.close();
          this.$message({
            message: "提交成功！",
            type: "success"
          });
          this.dialogVisible = false;
          this.getAdviceList();
        })
        .catch(res => {
          loading.close();
        });
    },
    deleteOne(id) {
      //删除审查意见
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      deleteAdviceOne({ id: id })
        .then(res => {
          loading.close();
          this.$message({
            message: "删除成功！",
            type: "success"
          });
          this.getAdviceList();
        })
        .catch(res => {
          loading.close();
        });
    },
     //校验意见审查
    handleCheckOpinion:function () {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let params = {
        linkId: 'FEASIBILITY_STUDY_CITY_CENTER_EXAMINE',
        projectId : this.projectId
      };
      submitAdvice(params).then(res => {
        loading.close();
        if(res.data.success == 2){
          var length = res.data.resultList.length;
          this.$confirm(`存在${length}条审查意见未通过,是否回退到上一步流程？`,'回退确认',{
            distinguishCancelAndClose:true,
            closeOnClickModal:false,
            confirmButtonText:'回退',
            cancelButtonText:'不回退',
            lockScroll:true,
            type:'warning',
          }).then(() => {
            const loading1 = this.$loading({
              lock: true,
              text: "Loading",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)"
            });
            let params = {
              link : "FEASIBILITY_STUDY_CITY_CENTER_EXAMINE",
              projectId : this.projectId
            };
            submitProcessComeback(params).then(res => {
              loading1.close();
              this.$message.success('回退成功！');
              setTimeout(()=>{
                this.$router.push('/projectManagement/planningStage/dealwith');
              },1000);
            }).catch(() => {
              loading1.close();
            })
          }).catch((action) => {
            if(action == "cancel"){
              setTimeout(()=>{
                this.$router.push('/projectManagement/planningStage/dealwith');
              },1000);
            }
          })
        }else{
          this.$message.success('操作成功！');
          setTimeout(()=>{
            this.$router.push('/projectManagement/planningStage/dealwith');
          },1000);
        };         
      }).catch(error => {
        loading.close();
      })
    },
    //意见类型切换
    handleSelectOpinionType:function (index) {
      this.opinionTypeIndex = index;
      if(index == 0) {
        this.getAdviceList();
      }else{
        this.getAdviceList1();
      }
    }
  },
  filters: {
    statusType(data) {
      //修改情况
      switch (data) {
        case 1:
          return "未整改";
          break;
        case 2:
          return "修改不通过";
          break;
        case 3:
          return "修改通过";
          break;
        case 4:
          return "正常";
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.maincontent {
  padding: 20px 30px 40px;
  background: #ffffff;
  .contentbox {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    // -webkit-align-items: center;
    // align-items: center;
    .printImg {
      width: 58%;
      height: calc(100vh - 160px);
      img {
        width: 100%;
        display: block;
      }
      .arrow {
        text-align: center;
        .turn {
          cursor: pointer;
        }
        .pages {
          margin: 0 20px;
        }
      }
      .pdfBox {
        width: 100%;
        height: calc(100% - 38px);
        overflow-y:auto;
        border: 1px solid rgba(0,0,0,.05);
        /deep/ .annotationLayer{
          transform: scale(0) !important;
        } 
      }
    }
    .opinionType{
      padding-left: 30px;
      padding-top: 20px;
      span {
        display: inline-block;
        padding:8px 16px;
        color:rgba(153,153,153,1);
        font-size:16px;
        cursor: pointer;
      }
      .active{
        color:rgba(64,158,255,1);
        background:rgba(238,243,248,1);
      }
    }
    .addadvice {
      width: 40%;
      margin-left: 2%;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      .header {
        margin-top: 24px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        padding: 30px 30px 20px;
        border-bottom: 1px solid #e4e4e4;
        .title {
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          flex: 1;
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: bold;
          line-height: 25px;
          color: #4d4d4d;
        }
        .export {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 20px;
          color: #737373;
          display: flex;
          .dachuShenCha_item{
            margin:0 5px;
          }
        }
      }
      .menulist {
        margin-top: 20px;
        margin-left: 30px;
        .item {
          width: 116px;
          height: 36px;
          background: #ffffff;
          line-height: 36px;
          text-align: center;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          margin-right: 24px;
          float: left;
          cursor: pointer;
          &.active {
            background: #eef3f8;
            color: #1d88f3;
          }
        }
        .add {
          float: right;
          width: 60px;
          height: 28px;
          background: rgba(64, 158, 255, 1);
          border-radius: 2px;
          text-align: center;
          line-height: 28px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          margin-top: 4px;
          cursor: pointer;
          margin-right: 30px;
        }
      }
      .advicelist {
        margin-top: 10px;
        .item {
          padding: 20px 30px;
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-align: center;
          border-bottom: 1px solid #e4e4e4;
          .situation {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            .msg {
              margin-top: 10px;
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              line-height: 20px;
              color: #8c8c8c;
            }
          }
          .other {
            text-align: right;
            .date {
              height: 18px;
              font-size: 13px;
              font-family: PingFang SC;
              font-weight: 500;
              line-height: 18px;
              color: #999999;
            }
            .delete {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              line-height: 20px;
              //   margin-top: 12px;
              color: #f92828;
              margin-left: 20px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
 